<template>
  <div class="navTabs">
    <template v-for="(item, index) in navTabs">
      <div
        class="tabs"
        @click="navTabsChange(index)"
        :class="{ activeTabs: currentIdx === index }"
        :key="item"
        :style="tabsStyle"
      >
        {{ item }}
      </div>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    navTabs: {
      type: Array,
      required: true
    },
    tabsStyle: {
      type: Object,
      default: () => ({})
    },
    defaultIdx: {
      type: Number,
      default: 0
    },
    isAllowClick: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      currentIdx: this.defaultIdx
    };
  },
  methods: {
    navTabsChange(i) {
      if (this.isAllowClick) {
        this.currentIdx = i;
        this.$emit("navTabsChange", i);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.navTabs {
  font-size: 14px;
  div {
    display: inline-block;
    background-color: rgba(219, 219, 219, 100);
  }
  // display: flex;
  // align-items: center;
  .activeTabs {
    background-color: #fff;
    border: 1px solid rgba(0, 176, 158, 100);
  }
  .tabs {
    padding: 10px 35px;
    cursor: pointer;
  }
}
</style>
